
<template>
  <div>
    <form action="#">
      <div class="header">
        <div class="registry">
          <div class="top-above"><h3>新用户注册</h3></div>
          <div class="top-below">
            <div>
              <!-- 用户名密码与确认密码 -->
              <el-form
                :model="ruleForm"
                :rules="rules"
                ref="ruleForm"
                class="demo-ruleForm"
              >
                <!-- 用户名 -->
                <el-form-item prop="name">
                  <el-input
                    v-model.trim="ruleForm.name"
                    clearable
                    style="border: none"
                    placeholder="请输入用户名"
                  ></el-input>
                </el-form-item>
                <!-- 密码 -->
                <el-form-item prop="pass">
                  <el-input
                    type="password"
                    v-model.trim="ruleForm.pass"
                    autocomplete="off"
                    clearable
                    placeholder="请输入密码"
                    show-password
                  ></el-input>
                </el-form-item>
                <!-- 确认密码 -->
                <el-form-item prop="checkPass">
                  <el-input
                    type="password"
                    v-model="ruleForm.checkPass"
                    autocomplete="off"
                    clearable
                    placeholder="请输入确认密码"
                    show-password
                  ></el-input>
                </el-form-item>
                <!-- 手机号 -->
                 <el-form-item prop="phone">
                  <el-input
                    v-model.trim="ruleForm.phone"
                    clearable
                    style="border: none"
                    placeholder="请输入手机号"
                  ></el-input>
                </el-form-item>

                <!-- 图形验证码 -->
                <yan-zheng-ma  @yzm1=whether_01  v-if="isRouterAlive"/>

                <!-- 性别选择 -->
                <el-form-item style="margin-top: 20px">
                  性别:&nbsp;&nbsp;&nbsp;&nbsp;
                  <el-radio v-model="ruleForm.radio" label="1">男</el-radio>
                  <el-radio v-model="ruleForm.radio" label="2">女</el-radio>
                  <el-radio v-model="ruleForm.radio" label="3">保密</el-radio>
                </el-form-item>
                <!-- 提交按钮 -->
                <el-row>
                  <el-button
                    type="danger"
                    round
                     @click="submitForm('ruleForm')"
                    style="width: 300px; height: 44px; margin-top: -20px"
                    >提交注册</el-button
                  >
                </el-row>
                <div class="form-check">
                <el-checkbox v-model="checked" text-color="red" >我已阅读并同意 <a href="#" class="protocol">《KoKo注册协议》</a> </el-checkbox>
                 </div> 
              </el-form>
            </div>
              
          </div>
        </div>
      </div>
    </form>
  </div>
</template>



<script>
// import YanZhengMa from "./YanZhengMa.vue";
 import YanZhengMa from "../components/YanZhengMa";
export default {
  components: { YanZhengMa },
   
  //  获取到子主键的值
  created(){
      this.$bus.$on('yzm1',this.whether_01)
  },

  data() {
    var checkname = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("用户名不能为空"));
      }else
          if (value === "") {
            callback(new Error("用户名6位"));
          } else {
            callback();
          }
    };
    var checkphone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("手机号不能为空"));
      }else
          if (value === "") {
            callback(new Error("输入手机号有误"));
          } else {
            callback();
          }
    };

    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入确认密码"));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      // 同意协议
      checked: true,
      // 刷新子组件
      isRouterAlive: true,
      ruleForm: {
        name: "",
        pass: "",
        checkPass: "",
        phone:"",
        avatar:"https://pic.imoe.pw/2022/10/15/f7f6d58558d65.png",    //默认头像图片地址
        radio: "3",
        verify:false,
      },
      rules: {
        pass: [
          { validator: validatePass, trigger: "blur" },
          { pattern: /^\w{6,15}$/, message: "密码至少6位" },
        ],
        checkPass: [
          { validator: validatePass2, trigger: "blur" },
          { pattern: /^\w{6,15}$/, message: "密码至少6位" },
        ],
        name: [
          { validator: checkname, trigger: "blur" },
          { pattern: /^\w{6,15}$/, message: "用户名至少6位" },
        ],
        phone: [
          { validator: checkphone, trigger: "blur" },
          { pattern: /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/, message: "输入手机号有误" },
        ],
      },
    };
  },
  methods: {
    // 验证码子组件传过来的值
    whether_01(e){
       console.log(e);
       this.verify=e
    },
    // 刷新子组件
   reload () {
     this.isRouterAlive = false
     this.$nextTick(() => (this.isRouterAlive = true))
     },   

    submitForm(formName) {
      // 判断是否同意协议
      if(this.checked==false){
          this.$message({
          message: '请同意协议',
           type: 'error',
           offset:70,
        });
      }
       if(this.verify=='kong'){
           this.$message({
          message: '请输入验证码',
           type: 'error',
           offset:110,
        });
      }
       
      this.$refs[formName].validate((valid) => {
        if (valid && this.verify!=false &&this.checked!=false) {
          // alert("注册成功!");
          // console.log("注册成功!");
          let params=`uname=${this.ruleForm.name}&upwd=${this.ruleForm.pass}&phone=${this.ruleForm.phone}&avatar=${this.ruleForm.avatar}&user_name=${this.ruleForm.name}&gender=${this.ruleForm.radio}`
          this.axios.post('/register',params).then(res=>{
              // console.log(res);

              if(res.data.code==200){
                 this.$message({
                  message: '注册成功!',
                  type: 'success',
                  offset:110,
                  duration:1500,
                  });   
                  // 延迟1.5秒在进行跳转
                setTimeout(()=>{            
                  this.$router.push('/login')
                }, 1550);
              }else{
                  this.$message({
                  message: '用户名已存在',
                  type: 'error',
                  offset:110,
                  duration:3000,
                  });   
                  this.reload();
              }
          })

        } else {
          //  this.$message({
          //  message: '注册失败!',
          //  type: 'error',
          //  offset:110,
          // });
          // console.log("注册失败!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style lang="scss">
  // 单选框添加颜色类
   .el-radio__input.is-checked + .el-radio__label {
       color: #ff6e6e !important;
   }
   .el-radio__input.is-checked .el-radio__inner {
       background: #ff6e6e !important;
       border-color: #ff6e6e !important;
   }

// 多选框激活样式时的颜色
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
border-color: #ff6e6e !important;;
background-color: #ff6e6e !important;;
}
.el-checkbox__input.is-checked+.el-checkbox__label{
color: #ff6e6e !important;;
}
.el-checkbox__inner:hover{
border-color: #ff6e6e !important;;
}
.el-checkbox__input.is-focus .el-checkbox__inner {
border-color: #ff6e6e !important;;

}
</style>
<style lang="scss" scoped>
.header {
  width: 100%;
}
//版心
.registry {
  width: 1120px;
  height: 542px;
  margin: 0 auto;
  display: block;
  padding-bottom: 100px;
  padding-top: 100px;
}

// 用户注册div
.top-above,
h3 {
  // width: 1120px;
  height: 90px;
  background: #ff6e6e;
  line-height: 90px;
  font-size: 24px;
  font-weight: 400 !important;
  color: #fff;
  text-align: center;
  border-radius: 20px 20px 0 0;
}

//下面所有表单的大div
.top-below {
  width: 1120px;
  min-height: 350px;
  background-color: white;
  box-shadow: 0 0 46px rgb(0 0 0 / 10%);
  border-radius: 20px;
}

// 大表单下的div包表单跟提交按钮
.top-below > div {
  width: 300px;
  margin: 0 auto;
  padding-top: 60px;
}

// 验证码图片
.top-below > div img {
  width: 110px;
  height: 40px;
  float: right;
  margin-top: -62px;
}

// 我已阅读并同意《KoKo注册协议》
.top-below .form-check {

  padding-top: 20px;
  padding-bottom: 30px;
  margin-left: -24px;
  // margin-right: 455px;

}

// 勾选框文字样式
.top-below a {
  width: 99px;
  height: 14px;
  color: #333;
}

// 勾选框样式
.form-check {
  position: relative;
}
.form-check label {
  height: 18px;
  margin-left: 20px;
}
.form-check input {
  margin-right: 5px;
  position: absolute;
  left: 0;
  top: 20px;
}
// input样式
input {
  border: 1px solid #f84b4b;
  border-radius: 5px;
}
.protocol{
  text-decoration: underline;
}

</style>

    